<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery双日历插件daterangepicker</title>
<meta name="description" content="jQuery双日历插件daterangepicker,和之前的所发布的相比，修改了时间格式，设置为中文，提供双日历的选择以及最近7天，30天，60天等便捷选择日期" />
<meta name="keywords" content="双日历，daterangepicker，jQuery双日历插件daterangepicker，时间区间选择,jquery,jquery插件" />
<link rel="stylesheet" type="text/css" href="static/css/iconfont.css">
<link href="static/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="static/css/daterangepicker.css">
<script src="static/js/jquery-1.10.2.js"></script>
<script src="static/js/moment.js"></script>
<script src="static/js/daterangepicker.js"></script>
</head>
<body>
<div class="bjui-pageContent">
<div class="form-group d_t_dater">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-12">
<div class="input-group">
<button type="button" class="btn btn-default" id="daterange-btn">
<span>
<i class="icon iconfont icon-calendar1"></i> 日期选择
</span>
<i class="icon iconfont icon-danxian-youjiantou-copy"></i>
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
    $('.ranges_1 ul').remove();
    $('#daterange-btn').daterangepicker({
		//"showDropdowns": true,
		"linkedCalendars":false,
        ranges: {
            '全部': [moment(), moment().subtract(-1, 'days')],
            '今天': [moment(), moment()],
            '明天': [moment().subtract(-1, 'days'), moment().subtract(-1, 'days')],
            '未来七天': [moment(),moment().subtract(-6, 'days')],
            '未来30天': [moment(),moment().subtract(-29, 'days')],
            '未来60天': [moment(),moment().subtract(-59, 'days'), ]
        },
        startDate: moment(),
        endDate: moment()
    },
    function(start, end,label) {
        //label:通过它来知道用户选择的是什么，传给后台进行相应的展示
     console.log(label)
        if(label=='全部'){
            $('#daterange-btn span').html('全部');
        }else if(label=='今天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
        }else if(label=='明天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
        }else if(label=='未来七天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
        }else if(label=='未来30天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
        }else if(label=='未来60天'){
            $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
        }
        
    }
);
</script>
</body>
</html>